<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-head">
      <input-normal label="头像宽度" v-model="commonAttr.width" @change="onChangeAttr"></input-normal>
      <input-normal label="头像高度" v-model="commonAttr.height" @change="onChangeAttr"></input-normal>
      <p class="margin-top-10 margin-left-right-16">头像边框</p>
      <add-img-con :url="commonAttr.borderImgUrl" comAttr="commonAttr" picAttr="borderImgUrl" :isCrop="false" :isDelete="true" :height="100" class="margin-left-right-16"></add-img-con>
      <p class="margin-top-10 margin-left-right-16">选择需要显示的内容</p>
      <el-checkbox-group v-model="dataKeys" class="margin-left-right-16">
        <el-checkbox v-for="(label, index) in USER_KEYS" :key="index" :label="label" ></el-checkbox>
      </el-checkbox-group>
      <div v-if="componentData.dataKeys && componentData.dataKeys.name">
        <input-normal label="前缀" v-model="commonAttr.namePrefix" @change="onChangeAttr"></input-normal>
        <input-normal label="后缀" v-model="commonAttr.nameSuffix" @change="onChangeAttr"></input-normal>
        <input-normal label="显示名字数" v-model="commonAttr.nameNum" @change="onChangeAttr"></input-normal>
        <input-normal label="用户描述信息" v-model="commonAttr.userDescription" @change="onChangeAttr"></input-normal>
        <slider-normal v-model="commonAttr.fontSize" label="字号" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
        <slider-normal v-model="commonAttr.marginTB" label="上下边距" :max="200" :step="1" @change="onChangeAttr"></slider-normal>
        <slider-normal v-model="commonAttr.marginLR" label="左右边距" :max="200" :step="1" @change="onChangeAttr"></slider-normal>
        <slider-normal v-model="commonAttr.lineHeight" label="行高" :max="10" :step="0.1" @change="onChangeAttr"></slider-normal>
        <color-normal v-model="commonAttr.color" label="字体颜色" :format="'rgb'" @change="onChangeAttr"></color-normal>
        <color-normal v-model="commonAttr.backgroundColor" label="背景颜色" :format="'rgb'" @change="onChangeAttr"></color-normal>
      </div>
       <submit-button v-if="componentData.dataKeys && componentData.dataKeys.follow" :btnComponentData="componentData.btn" comAttr="btn"></submit-button>
    </el-form>
  </right-template>
</template>
<script>
  import RightTemplate from '@/views/child/right/right-template.vue'

  import ColorNormal from '@/views/components/edit/ColorNormal.vue'
  import SliderNormal from '@/views/components/edit/SliderNormal.vue'
  import SubmitButton from '@/views/components/submit-button.vue'
  import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
  import InputNormal from '@/views/components/edit/InputNormal.vue'
  import AddImgCon from '@/views/components/add-img-con.vue'

  import { editUtils } from '@/views/js/edit-utils'
  import { dataUtils } from '@/views/js/data-utils'
  import { USER_KEYS } from '@/common/data-drive-ui'


  export default {
    name: "RightHead",
    mixins: [editUtils, dataUtils],
    setup () {
      return {
        USER_KEYS: USER_KEYS,
      }
    },
    components: {
      RightTemplate,
      ColorNormal,
      SliderNormal,
      DropdownNormal,
      InputNormal,
      SubmitButton,
      AddImgCon,
    },
  }
</script>
